<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <img src="" alt="" id="pic" width="300">
  <input type="file" id="file" />
  <script>
  // es6 file对象 blob blob:// 在文件上传？
  // 解决什么问题
  // 传统es5时代文件只有上传到服务器后，静态服务提供一个远程地址给我们， 才能够看到我们上传的这张图片。 
  // es6在本地客户端操作文件的能力  file对象， 
  // blob 协议在本地就把它立马显示出来，配上上传进度， 更好的用户体验
  document.getElementById('file').addEventListener('change', (e) => {
    const file = e.target.files[0];
    // console.log(Object.prototype.toString.call(file));
    const URL = window.URL;
    const objectUrl = URL.createObjectURL(file);
    console.log(objectUrl);
    const pic = document.getElementById('pic');
    pic.src = objectUrl;
    pic.onload = function() {
      URL.revokeObjectURL(objectUrl);
      console.log('为了获得最佳性能和内存使用状态，释放对象');
    }
  })
  </script>
</body>
</html>